<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="/css/layui.css" rel="stylesheet">
  <link href="/css/style.css" rel="stylesheet">
  <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
  <style>
    .font-name {
      color: #0008ff;
      font-size: 18px;
    }
  </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content" style="padding: 0px 20px">
  <div class="row">
    <div class="col-sm-12">
      <div class="ibox float-e-margins">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin: 0px">
          <ul class="layui-tab-title">
            <li class="layui-this">物资详情</li>
            <li>转交记录</li>
          </ul>
          <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">
              <div class="ibox-content">
                <table class="layui-table">
                  <colgroup>
                    <col width="130">
                    <col>
                  </colgroup>
                  <tbody>
                  <tr hidden>
                    <td>id</td>
                    <td class="table-text-info" th:text="${material.id}"></td>
                  </tr>
                  <tr>
                    <td>物资图片</td>
                    <td class="table-text-info">
                      <img src="" th:src="${material.imgUrl}" style="max-width: 196px;max-height: 150px">
                    </td>
                  </tr>
                  <tr>
                    <td>物资名称</td>
                    <td class="table-text-info" th:text="${material.name}"></td>
                  </tr>
                  <tr>
                    <td>数量</td>
                    <td class="table-text-info" th:text="${material.number}"></td>
                  </tr>
                  <tr>
                    <td>物资类别</td>
                    <td class="table-text-info" th:text="${material.kindName}"></td>
                  </tr>
                  <tr>
                    <td>创建人</td>
                    <td class="table-text-info" th:text="${material.createUser}"></td>
                  </tr>
                  <tr>
                    <td>创建时间</td>
                    <td class="table-text-info" th:text="${#dates.format(material.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                  </tr>
                  <tr>
                    <td>修改人</td>
                    <td class="table-text-info" th:text="${material.updateUser}"></td>
                  </tr>
                  <tr>
                    <td>修改时间</td>
                    <td class="table-text-info" th:text="${#dates.format(material.updateTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="layui-tab-item">
              <div class="ibox-content">
                <ul class="layui-timeline">
                  <li class="layui-timeline-item" th:each="transfer : ${transferList}">
                    <i class="layui-icon layui-timeline-axis" title="转交时间">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                      <h3 class="layui-timeline-title"
                          th:text="${#dates.format(transfer.createTime, 'yyyy-MM-dd')}">转交时间</h3>
                      <p>
                        物品由&nbsp;
                        <span class="font-name" th:text="${transfer.outUser}"></span>&nbsp;转交给&nbsp;<span class="font-name" th:text="${transfer.inUser}"></span><br>
                        <i class="fa fa-user-circle-o" title="登记人"></i>&nbsp;<span th:text="${transfer.createUser}"></span>&ensp;&ensp;&ensp;
                        <i class="fa fa-calendar" title="登记时间"></i>&nbsp;<span th:text="${#dates.format(transfer.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                      </p>
                    </div>
                  </li>
                  <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                      <div class="layui-timeline-title">没有更多记录了</div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="/js/vue.min.js"></script>
<script src="/js/layui.js"></script>
<script>
  layui.use('element', function () {
    var $ = layui.jquery
      , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

    //触发事件
    var active = {
      tabChange: function () {
        //切换到指定Tab项
        element.tabChange('demo', '22'); //切换到：用户管理
      }
    };

    $('.site-demo-active').on('click', function () {
      var othis = $(this), type = othis.data('type');
      active[type] ? active[type].call(this, othis) : '';
    });

  });
</script>
</body>
</html>
